<script lang="ts" setup>
	import { ref, reactive } from 'vue'
	import { useRouter } from 'uni-mini-router'
	import { onLoad } from "@dcloudio/uni-app";

	const router = useRouter()
	let latitude = ref(39.909)
	let longitude = ref(116.39742)
	
	const content = ref(null);

	onLoad((options) => {
		if (options.content) {
			content.value = JSON.parse(options.content);
		}
		console.log(options);
	});

	const src = ref('http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg')

	let covers = ref([
		{
			latitude: 39.9085,
			longitude: 116.39747,
			// #ifdef APP-PLUS
			iconPath: '../../../static/app-plus/location@3x.png',
			// #endif
			// #ifndef APP-PLUS
			// iconPath: '../../../static/location.png',
			// #endif
		}, {
			latitude: 39.90,
			longitude: 116.39,
			// #ifdef APP-PLUS
			iconPath: '../../../static/app-plus/location@3x.png',
			// #endif
			// #ifndef APP-PLUS
			// iconPath: '../../../static/location.png',
			// #endif
		}
	])
</script>

<template>
	<u-navbar :placeholder="true" bg-color="#fff" leftText="" title="" auto-back>
		<template #center>
			<view style="font-weight: 900; margin: 60rpx 0">
				面试邀请
			</view>
		</template>
	</u-navbar>
	<view class="main">
		<view class="card">
			<u-avatar :src="src" shape="square"></u-avatar>
			<view class="info">
				<view class="title">
					{{content.companyName}}
				</view>
				<view class="subTit">
					<u-avatar :src="src" size=20 shape="square"></u-avatar>
					<view class="text">{{content.hr?.username}}·{{content.hr?.post}}</view>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="list">
				<view class="tit">时间：</view>
				<view class="cont">{{ content.time }}</view>
			</view>
			<view class="list">
				<view class="tit">职位：</view>
				<view class="cont">{{content.jobName}},{{content.moneny}}</view>
			</view>
			<view class="list">
				<view class="tit">联系人：</view>
				<view class="cont">{{content.phone}}</view>
			</view>
			<view class="list">
				<view class="tit">地址：</view>
				<view class="cont">{{ content.address }}</view>
			</view>
			<view class="list">
				<map style="width: 100%; height: 200px;" :latitude="latitude" :longitude="longitude" :markers="covers">
				</map>
			</view>
			<view class="list">
				<view class="tit">备注：</view>
				<view class="cont">{{ content.remark }}</view>
			</view>
		</view>
	</view>
</template>

<style lang="scss">
	.u-navbar {
		margin-bottom: 50rpx;
	}

	page {
		background-color: #F4F5F6;
	}

	.u-avatar--square {
		border-radius: 0;
	}

	.main {
		margin: 20rpx auto;
		width: 702rpx;
		height: 1266rpx;
		background: #FFFFFF;
		border-radius: 8rpx;

		.card {
			border-bottom: 1px solid #F4F5F6;
			padding: 36rpx 42rpx;
			display: flex;
			align-items: center;

			.info {
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				margin: 0 24rpx;

				.subTit {
					display: flex;
					align-items: center;
					margin-top: 16rpx;
				}
			}
		}

		.content {
			padding: 38rpx;

			.list {
				display: flex;
				margin-bottom: 36rpx;

				.tit {
					width: 144rpx;
					white-space: nowrap;
					font-size: 28rpx;
					color: #28211F;
					letter-spacing: 0.4rpx;
				}

				.cont {
					// white-space: nowrap;
					// overflow: hidden;
					width: 480rpx;
					font-size: 28rpx;
					color: #28211F;
					letter-spacing: 0.4rpx;
				}
			}
		}
	}
</style>